@import "common";
//导入公共样式

body{
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;
}

//顶部广告区域
@baseFont: 50px;


.bkg {
  position: absolute;
  top: 0;
  width: 750rem / @baseFont;
  height: 460rem / @baseFont;
  margin: 0 auto;
  overflow: hidden;

  .background {
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 460rem / @baseFont;
    border-bottom-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
    background: rgb(255, 219, 71);
    z-index: -1;
  }
}


.guanggao{
  width: 750rem / @baseFont;
  height: 100rem / @baseFont;
  .img {
    position: relative;
    img {
      width: 750rem / @baseFont;
      height: 100rem / @baseFont;
    }
    span {
      position: absolute;
      top: 25rem / @baseFont ;
      left: 5rem / @baseFont ;
      display: block;
      width: 50rem / @baseFont;
      height: 50rem / @baseFont;
      background: url(../images/suning/close.png) no-repeat 10rem/@baseFont 10rem/@baseFont;
      background-size: 30rem / @baseFont 30rem / @baseFont;
    }
  }
}

// 搜索栏
.search_index{
  position: relative;
  width: 750rem / @baseFont;
  height: 180rem / @baseFont;
  overflow: hidden;
  .user{
    width: 682rem / @baseFont;
    height: 88rem / @baseFont;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a:nth-child(1){
      display: block;
      img{
        width: 36rem / @baseFont;
        height: 60rem / @baseFont;
      }
    }
    a:nth-child(2) {
      display: block;
      img {
        width: 450rem / @baseFont;
        height: 55rem / @baseFont;
      }
    }
    a:nth-child(3) {
      display: block;
      img {
        width: 36rem / @baseFont;
        height: 60rem / @baseFont;
      }
    }
  }
  .search{
    position: relative;
    width: 702rem / @baseFont;
    height: 88rem / @baseFont;
    padding: 0 0.48rem;
    margin: 0 auto;
    a{
      display: block;
      width: 702rem / @baseFont;
      height: 64rem / @baseFont;
      background: #fff;
      border-radius: 1rem;
      margin: 12rem / @baseFont 0 0 0 ;
      color: #999;
      i{
        position: absolute;
        top: 0.3rem;
        left: 0.8rem;
        display: block;
        float: left;
        width: 36rem / @baseFont;
        height: 36rem / @baseFont;
        background: url(../images/suning/search.png) no-repeat 0 0;
        background-size: 36rem / @baseFont 36rem / @baseFont;
      }
      span{
        font-size: 0.56rem;
        line-height: 64rem / @baseFont;
        padding: 3rem / @baseFont 20rem / @baseFont 0 65rem / @baseFont;
      }
    }
  }
  
}



// banner
.banner{
  width: 702rem / @baseFont;
  height: 260rem / @baseFont;
  background-color: #66ccff;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  .banner_ul{
    width: 2106rem / @baseFont;
    height: 260rem / @baseFont;
    li{
      position: relative;
      float: left;
      width: 702rem / @baseFont;
      height: 260rem / @baseFont;
      a{
        display: block;
        img{
          position: absolute;
          bottom: 0;
          display: block;
          width: 702rem / @baseFont;
        }
      }
    }
  }
}

//导航栏

.nav{
  width: 750rem / @baseFont;
  height: 308rem / @baseFont;
  a{
    display: block;
    float: left;
    width: 150rem / @baseFont;
    height: 142rem / @baseFont;
    text-align: center;
    img{
      display: block;
      width: 84rem / @baseFont;
      height: 84rem / @baseFont;
      margin: 24rem / @baseFont auto 0;
    }
    span{
      font-size: 22rem / @baseFont;
      margin: 5rem / @baseFont 0 0 0 ;
      color: #666;
    }
  }
}

// 红包

.hongbao{
  width: 752rem / @baseFont;
  height: 240rem / @baseFont;
  .hongbao1{
    float: left;
    width: 373.52rem / @baseFont;
    height: 234rem / @baseFont;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .hongbao2 {
    width: 186.25rem / @baseFont;
    height: 234rem / @baseFont;
    float: left;
    margin: 0 2rem / @baseFont;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .hongbao3 {
    width: 186.25rem / @baseFont;
    height: 234rem / @baseFont;
    float: left;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

.big_blank{
  width: 750rem / @baseFont;
  height: 24rem / @baseFont;
}


// 天天低价
.downmoney{
  width: 750rem / @baseFont;
  height: 258rem / @baseFont;
  .money{
    width: 702rem / @baseFont;
    height: 258rem / @baseFont; 
    margin: 0 auto;
    .miaosha{
      width: 349rem / @baseFont;
      height: 258rem / @baseFont;
      background: #fff;
      float: left;
      margin-right: 1rem / @baseFont;
      .miaosha_title{
        width: 350rem / @baseFont;
        height: 58rem / @baseFont;
        span{
          display: block;
          float: left;
          font-size: 28rem / @baseFont;
          margin: 18rem / @baseFont 8rem / @baseFont 0 24rem / @baseFont;
          color: #000;
          font-weight: bold;
        }   
      }
      p{
        font-size: 24rem / @baseFont;
        margin: 4rem / @baseFont 0 0 24rem / @baseFont;
        color: #999;
      }
      .miaosha_img {
        width: 350rem / @baseFont;
        height: 150rem / @baseFont;
        margin: 5rem / @baseFont 0 0;
        padding: 0 0 0 28rem / @baseFont;
        a{
          display: block;
          float: left;
          
          img{
            display: block;
            width: 120rem / @baseFont;
            height: 120rem / @baseFont;

          }
          p{
            color: #ff5500;
            font-size: 22rem / @baseFont;
            span{
              font-size: 28rem / @baseFont;
            }
          }
        }
        a:nth-child(1){
          margin-right: 55rem / @baseFont ;
        }
      }
    }
  }
  
}

.tuijian{
  width: 702rem / @baseFont;
  height: 172rem / @baseFont;
  margin:  0 25rem / @baseFont;
  background: #fff;
  .tuijian_title{
    padding:47rem / @baseFont 18rem / @baseFont 0;
    float: left;
    p{
      font-size: 32rem / @baseFont;
      color: #444;
      font-weight: bold;
    }
    p:nth-child(2){
      font-size: 24rem / @baseFont;
      color: #999;
      font-weight: normal;
    }
  }
  .tuijian_img{
    width: 508rem / @baseFont;
    height: 172rem / @baseFont;
    float: left;
    a{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      width: 120rem / @baseFont;
      height: 178rem / @baseFont;
      float: left;
      text-align: center;
      img{
        width: 100rem / @baseFont;
        height: 100rem / @baseFont;
      }
      p{
        font-size: 22rem / @baseFont;
      }
    }
  }
}

.cainixihuan_title{
  width: 702rem / @baseFont;
  height: 60rem / @baseFont;
  img{
    display: block;
    width: 702rem / @baseFont;
    height: 60rem / @baseFont;
  }
}
.cainixihuan{
  width: 780rem / @baseFont;
  overflow: hidden;
  margin-bottom: 120rem / @baseFont;
  .cainixihuan_div{
    width: 342rem / @baseFont;
    background: #fff;
    margin: 0 24rem / @baseFont 12rem / @baseFont;
    float: left;
    a{
      display: block;
      img{
        display: blcok;
        width: 342rem / @baseFont;
        height: 342rem / @baseFont;
      }
    }
    p{
      margin: 18rem / @baseFont 12rem / @baseFont 0 12rem / @baseFont  ;
      font-size: 26rem / @baseFont;
      font-weight: bold;
      color: #000;
    }
    p.tips{
      display: flex;
      width: 269rem / @baseFont;
      height: 24rem / @baseFont;
      flex-wrap: warp;
      i{
        font-size: 18rem / @baseFont;
        margin: 0 6rem / @baseFont 2rem / @baseFont 0;
        padding: 0rem / @baseFont 6rem / @baseFont;
        border-radius:0.12rem;
        text-align: center;
        background: #ffcc00;
        font-weight: normal;
      }
    }
    span.money{
      color: #ff4422;
      font-size: 24rem / @baseFont;
      margin: 0 12rem / @baseFont;
    }
    span{
      color: #999;
      font-size: 20rem / @baseFont;
    }

  }
}

.footer{
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 750rem / @baseFont;
  height: 100rem / @baseFont;
  justify-content: center;
  background: #fff;
  a{
    width: 20%;
    img {
      display: block;
      margin: 10rem / @baseFont auto 0;
      width: 48rem / @baseFont;
      height: 48rem / @baseFont;
    }
    p {
      text-align: center;
      color: #000;
      font-size: 20rem / @baseFont;
      font-weight: bold;
    }
  }
  
}



















